<template>
  <div class="play-container">
    <h3>总录音条数 {{totalCount}}，当前第 {{values.currentMarkIndex}} 条。</h3>
    <div style="display: flex; margin-bottom: 20px;">
      <audio :src="nowVoice"></audio>
      <div style="width: 30%;">
        <div :style="isPlaying ? 'cursor: not-allowed;' : 'cursor: pointer;'" @click="playVoice">
          <img :src="require('../assets/speakers.png')" style="margin-top: 45%;"/>
          <div>{{isPlaying ? '' : '点击播放'}}</div>
        </div>
        <div>00:{{timer >= 10 ? timer : ('0' + timer)}}</div>
      </div>
      <div class="question-container">
        <p>请根据您听万语音后的感觉，    对该语音的各类语气进行打分。每类语气分值从1-7分，分值越高表示对应的语气程度越深（\明显）</p>
        <el-table :data="tableData" style="width: 100%"
          v-loading="timer>0"
          :element-loading-text="timer==15 ? '请先点击喇叭播放音频，听完音频后再作答' : timer + '秒后开始作答...'"
          element-loading-spinner='el-icon-timer'
          element-loading-background="rgba(255, 255, 255, 0.5)"
          >
          <el-table-column align="center" prop="label">
            <template slot="header" slot-scope="scope">
              <br><span class="score">分值</span>
            </template>
          </el-table-column>
          
          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              没有<br><span class="score">1</span>
            </template>
            <template slot-scope="scope">
              <el-radio v-model="values[scope.row.name]" :label="1" >&nbsp;</el-radio>
            </template>
          </el-table-column>
          
          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              很少有<br><span class="score">2</span>
            </template>
            <template slot-scope="scope">
              <el-radio v-model="values[scope.row.name]" :label="2" >&nbsp;</el-radio>
            </template>
          </el-table-column>
    
          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              有点<br><span class="score">3</span>
            </template>
            <template slot-scope="scope">
              <el-radio v-model="values[scope.row.name]" :label="3" >&nbsp;</el-radio>
            </template>
          </el-table-column>
          
          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              一般<br><span class="score">4</span>
            </template>
            <template slot-scope="scope">
              <el-radio v-model="values[scope.row.name]" :label="4" >&nbsp;</el-radio>
            </template>
          </el-table-column>
          
          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              比较<br><span class="score">5</span>
            </template>
            <template slot-scope="scope">
              <el-radio v-model="values[scope.row.name]" :label="5" >&nbsp;</el-radio>
            </template>
          </el-table-column>
          
          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              较多<br><span class="score">6</span>
            </template>
            <template slot-scope="scope">
              <el-radio v-model="values[scope.row.name]" :label="6" >&nbsp;</el-radio>
            </template>
          </el-table-column>
          
          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              非常<br><span class="score">7</span>
            </template>
            <template slot-scope="scope">
              <el-radio v-model="values[scope.row.name]" :label="7" >&nbsp;</el-radio>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-button
      v-if="totalCount > 1"
      :type="values.currentMarkIndex < totalCount ? 'primary': 'info'"
      :disabled="timer > 0 || values.currentMarkIndex >= totalCount"
      @click="nextVoice">
      下一条
    </el-button>
    <el-button
      :type="values.currentMarkIndex >= totalCount ? 'primary': 'info'"
      :disabled="timer > 0 || values.currentMarkIndex < totalCount"
      @click="finish">
      完成
    </el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        timer: 15,
        isPlaying: false,
        totalCount: 13,
        nowVoice: "",
        voiceList: [],
        startTimeNum: 0,
        values: {
          peopleId: this.$store.state.peopleId,
          wavId: '',
          startTime: '',
          endTime: '',
          durationTime: '',
          currentMarkIndex: 1,
          wz: 0,
          jd: 0,
          zx: 0,
          rh: 0,
          qxh: 0,
          zz: 0,
        },
        tableData:[{
          label: '稳重',
          name: 'wz',
        },{
          label: '坚定',
          name: 'jd',
        },{
          label: '秩序',
          name: 'zx',
        },{
          label: '柔和',
          name: 'rh',
        },{
          label: '情绪化',
          name: 'qxh',
        },{
          label: '尊重',
          name: 'zz',
        }]
      };
    },
    mounted() {
      // 没有登录直接进入该页面
      if (!this.$store.state.peopleId) {
        this.$router.push('/login');
        
        return;
      }
      
      this.init();
      this.getConfig();
    },
    methods: {
      getConfig() {
        var that = this;
        that.$api.config.get()
          .then(function(response) {
             that.totalCount = response.data.peopleVoiceCount;
          });
      },
      playVoice() {
        var self = this;
        if (self.isPlaying) {
          return;
        }
        var audio = document.querySelector('audio');
        audio.play();
        
        self.isPlaying = true;
        // 倒计时
        var t = setInterval(function() {
          if (self.timer <= 0) {
            clearInterval(t);
            return;
          }
          self.timer--;
        }, 1000);
      },
      init() {
        var self = this;
        self.$api.playvoice.getOneVoiceName().then(function(res) {
          self.nowVoice = "/voice-recognition/voice/getVoice?name=" + res.data.name;
          self.values.wavId = res.data.id;
          self.values.startTime = self.$moment(new Date()).format('YYYY-MM-DD hh:mm:ss');
          self.startTimeNum = new Date().getTime();
        })
      },
      nextVoice() {
        this.save(function(self) {
          // 加载下一条音频
          self.$api.playvoice.getOneVoiceName().then(function(res) {
            self.nowVoice = "/voice-recognition/voice/getVoice?name=" + res.data.name;
            self.values.wavId = res.data.id;
            self.values.startTime = self.$moment(new Date()).format('YYYY-MM-DD hh:mm:ss');
            self.startTimeNum = new Date().getTime();
            
            // 清空上次的标记数据
            self.tableData.forEach(function(e) {
              self.values[e.name] = 0;
            });
            self.isPlaying = false;
            self.timer = 15;
            
            self.values.currentMarkIndex++;
          })
        });
      },
      save(callback){
        var self = this;

        if (!self.values.wz
            || !self.values.jd
            || !self.values.zx
            || !self.values.rh
            || !self.values.qxh
            || !self.values.zz) {
          self.$confirm('所有内容都完成才能进行下一步操作', '提示', {
            showCancelButton: false,
            confirmButtonText: '确定',
            type: 'warning',
          });
          return;
        }
        
        // 保存该条音频的标记数据
        self.values.peopleId = self.$store.state.peopleId;
        self.values.endTime = self.$moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
        self.values.durationTime = Math.ceil((new Date().getTime() - self.startTimeNum) / 1000);
        
        self.$api.mark.save(self.values).then(function(res) {
          callback(self);
        });
      },
      finish() {
        let self = this;
        self.save(function() {
          self.$router.push("/userdetail");
        });
      }
    },
  };
</script>

<style>
  .play-container {
    vertical-align: middle;
    border: 1px solid #DCDFE6;
    width: 60%;
    height: auto;
    margin:  auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .score{
    color: orange;
  }
  .question-container {
    width: 70%;
    text-align: left;
  }
  i.el-icon-timer {
    font-size: 32px;
  }
</style>
